
<template>
  <div class="mySet">
    <ul>
      <li class="set">
        <i class="iconfont iconhome" @click="onClickLeft"></i>
        <span>系统设置</span>
      </li>
      <li class="clera">
        <span>清除缓存</span>
        <span>493.2 KB</span>
      </li>
      <li class="feedback">
        <span>意见反馈</span>
      </li>
      <li class="git">
        <span>版本号 V1.6.0</span>
      </li>
      <li class="out" @click="gonSign">
        <span>退出</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "mySet",
  data() {
    return {};
  },
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    gonSign() {
      this.$dialog
        .confirm({
          title: "退出登录确认",
          message: "是否继续退出登录"
        })
        .then(() => {
          this.store();
          this.logout();
        })
        .catch(() => {
          // on cancel
        });
    },
    logout() {
      let url = "/user/logout";
      this.$axios.get(url).then(res => {
        this.gohome();
      });
    },
    store() {
      this.$store.commit("updatephone", "");
      this.$store.commit("updatetoken", "");
      this.$store.commit("updateuserId", "");
      this.$store.commit("updateislogin", false);
      this.$store.commit("updateaddressname", "");
      this.$store.commit("updateaddresstel", "");
      this.$store.commit("updateaddress", "");
    },
    gohome() {

      this.$router.push("/login");
    }
  }
};
</script>
<style lang="less" scoped>
.mySet {
  height: 100vh;
  color: #2e2f30;
  background-color: #f4f4f4;
  font-size: 17px;
  font-weight: normal;
  position: relative;
  .set {
    box-sizing: border-box;
    padding: 10px;
    height: 44px;
    line-height: 43px;
    position: relative;
    background-color: white;
    border-bottom: #f4f4f4 1px solid;
    i {
      position: absolute;
      left: 5px;
      top: 0px;
      transform: translate(50%, 0);
      font-size: 19px;
    }
    span {
      position: absolute;
      left: 47%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .clera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 15px;
    height: 49px;
    line-height: 49px;
    position: relative;
    background-color: white;
    border-bottom: #f4f4f4 1px solid;
    font-size: 15px;
    span:last-child {
      color: #bdc0c5;
      font-size: 13px;
    }
  }
  .feedback {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 15px;
    height: 49px;
    line-height: 49px;
    position: relative;
    background-color: white;
    border-bottom: #f4f4f4 1px solid;
    font-size: 15px;
  }
  .git {
    margin-top: 23px;
    height: 49px;
    line-height: 19px;
    text-align: center;
    color: #bdc0c5;
    font-size: 13px;
  }
  .out {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 49px;
    background-color: white;
    color: #c03131;
    line-height: 49px;
    text-align: center;
    z-index: 55;
    font-size: 15px;
  }
}
</style>